<script setup lang="ts">
import { useDetail } from "@/views/residential/utils/hooks";
import { ref } from "vue";
import { getPropertyInfo, getResidentialInfo } from "@/api/community";
import { message } from "@/utils/message";

defineOptions({
  name: "residentialInfo"
});

const { initToDetail, getParameter } = useDetail();
initToDetail("params");

const data = ref({});
const property = ref({});

async function getInfo() {
  getResidentialInfo(getParameter.id)
    .then(res => {
      if (res.code === 200) {
        data.value = res.data;
        console.log(data.value);
      } else {
        message(res.msg, { type: "error" });
      }
    })
    .finally(() => {
      getProperty();
    });
}

function getProperty() {
  console.log(data.value.propertyId);
  getPropertyInfo(data.value.propertyId).then(res => {
    if (res.code === 200) {
      property.value = res.data;
    } else {
      message(res.msg, { type: "error" });
    }
  });
}

getInfo();
</script>

<template>
  <div class="main-container">
    <h1 style="text-align: center">{{ data.name }}小区详细信息</h1>
    <el-descriptions direction="vertical" :column="4" size="large" border>
      <el-descriptions-item label="小区ID">{{ data.id }}</el-descriptions-item>
      <el-descriptions-item label="建成时间">
        {{ data.completion }}
      </el-descriptions-item>
      <el-descriptions-item label="所属物业" :span="2"
        >{{ data.propertyId === null ? "尚未分配" : property.name }}
      </el-descriptions-item>
      <el-descriptions-item label="建筑面积">
        <el-tag size="small">{{ data.buildArea }}㎡</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="小区地址"
        >{{ data.address }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped lang="scss"></style>
